<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--移动端设置viewport-->
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0">
    <!--引入公共样式-->
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="index.css">
    <script src="jquery-1.12.2.min.js"></script>
    <title>京东-首页</title>
</head>
<body>
<div class="jd_layout">

    <!--轮播图-->
    <div class="jd_banner">
        <!--图片-->
        <ul class="jd_bannerImg clearfix">
            <li>
                <a href="javascript:;">
                    <img src="./uploads/l1.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./uploads/l2.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./uploads/l3.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./uploads/l4.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./uploads/l5.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./uploads/l6.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./uploads/l7.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./uploads/l8.jpg" alt="">
                </a>
            </li>
        </ul>
        <!--点标记-->
        <ul class="jd_bannerIndicator">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

</div>
<script>
    $(function(){
        /*1.添加首尾两张图片*/
        /*2.重新设置图片盒子和宽度和图片的宽度*/
        /*3.开启定时器，实现自动轮播*/
        /*4.添加移动端的滑动事件，实现手动轮播*/
        /*5.添加过渡效果结束之后的监听*/
        /*获取轮播图元素*/
        var banner=$(".jd_banner");
        var bannerWidth=banner.width();
        console.log(bannerWidth);
        /*获取图片盒子*/
        var imgBox=banner.find("ul:first-of-type");
        /*获取点标记*/
        var indicators=banner.find("ul:eq(1)").find("li");
        /*获取尾张图片*/
        var first=imgBox.find("li:first-of-type");
        /*将图片添加到首尾位置  first.clone():将first复制一份*/
        imgBox.append(first.clone());

        /*设置图片盒子的宽度*/
        var lis=imgBox.find("li");
        var count=lis.length;
        imgBox.width(count*bannerWidth);
        /*设置li标签的宽度*/
        lis.each(function(index,value){
            $(lis[index]).width(bannerWidth);
        });

        /*设置默认偏移*/
        imgBox.css("left",-bannerWidth);

        /*定义图片索引*/
        var index=1;

        /*图片轮播的动画效果*/
        var imgAnimation=function(){
            imgBox.animate(
                    {"left":-index*bannerWidth},
                    200,
                    function(){ //动画执行完毕之后的回调
                        /*判断当前索引位置是否是最后一张或者第一张*/
                        if(index==count-1){ //最后张
                            index=1;
                            /*让它瞬间偏移到索引1的位置--非过渡*/
                            imgBox.css("left",-index*bannerWidth);
                        }else if(index==0){
                            index=count-2;
                            imgBox.css("left",-index*bannerWidth);
                        }
                        /*设置点标记*/
                        indicators.removeClass("active").eq(index-1).addClass("active");
                    }
            );
        };

        /*开启定时器*/
        var timerId=setInterval(function(){
            index++;
            console.log(index);
            /*开启过渡*/
            /*设置定位*/
            /*在zepto中直接使用animate函数来实现
            * 1.需要添加动画效果的样式--对象
            * 2.动画的耗时
            * 3.动画的速度函数 animation-timing-function
            * 4.当前动画执行完毕之后的回调*/
            imgAnimation();
        },1000);

        /*添加滑动事件*/
        /*左滑动*/
        /*在谷歌浏览器的模拟器中，无法正确的触发swipe相关事件，但是可以触发tap事件*/
       /* imgBox.on("swipeLeft",function(){
            clearInterval(timerId);
            index++;
            imgAnimation();
        });
        /!*右滑动*!/
        imgBox.on("swipeRight",function(){
            clearInterval(timerId);
            index--;
            imgAnimation();
        });*/
    });
</script>
</body>
</html>